<template>
    <div>
        <el-dialog title="新增字典数据" :visible.sync="dialogVisible" width="500px" :before-close="closeEditDialog"
            :close-on-click-modal="false" :append-to-body="true">
            <el-form :model="addInfo" :rules="rules" ref="refAddInfo" label-width="100px">
                <el-form-item size="small" label="字典标签" prop="dickLabel">
                    <el-input clearable v-model.trim="addInfo.dickLabel" placeholder="请输入" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item size="small" label="字典键值" prop="dickValue">
                    <el-input clearable v-model="addInfo.dickValue" placeholder="请输入" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item size="small" label="字典排序" prop="dickSort">
                    <el-input clearable v-model="addInfo.dickSort" placeholder="请输入" maxlength="2"></el-input>
                </el-form-item>
                <el-form-item size="small" label="回显样式">
                    <el-select v-model="addInfo.listClass" placeholder="请选择" style="width: 100%;" clearable>
                        <el-option v-for="item in listClassArr" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item size="small" label="备注">
                    <el-input type="textarea" :rows="3" placeholder="请输入" v-model="addInfo.dickDefinition" maxlength="30"
                        resize='none' :autosize="{ minRows: 2, maxRows: 5 }">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
                <el-button size="small" @click="addSubmit" class="confirm-button" v-preventReClick="1000">确
                    定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { reqDictDataAdd } from "@/api/api";

export default {
    name: "add",
    props: ["id"],
    components: {},
    data() {
        return {
            dialogVisible: false,
            addInfo: {
                dickLabel: "",
                dickValue: "",
                dickSort: "",
                dickDefinition: "",
                listClass:""
            },
            // 表单验证规则
            rules: {
                dickLabel: [
                    {
                        required: true,
                        message: "请输入字典标签",
                        trigger: "blur",
                    },
                ],
                dickValue: [
                    {
                        required: true,
                        message: "请输入字典键值",
                        trigger: "blur",
                    },
                ],
                dickSort: [
                    {
                        required: true,
                        message: "请输入字典排序",
                        trigger: "blur",
                    },
                ],
            },
            listClassArr: [{
                name: "默认(default)",
                id: 'default'
            }, {
                name: "主要(primary)",
                id: 'primary'
            }, {
                name: "成功(success)",
                id: 'success'
            }, {
                name: "信息(info)",
                id: 'info'
            }, {
                name: "警告(warning)",
                id: 'warning'
            }, {
                name: "危险(danger)",
                id: 'danger'
            }]
        };
    },
    computed: {},
    methods: {
        addSubmit() {
            this.$refs.refAddInfo.validate(async (valid) => {
                if (valid) {
                    const res = await reqDictDataAdd({ ...this.addInfo, dickId: this.id });
                    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
                    this.$modal.notifySuccess("新增字典数据成功");
                    this.closeEditDialog();
                    this.$parent.getDataList();
                }
            });
        },
        // 点击关闭弹框
        closeEditDialog() {
            this.$refs.refAddInfo.resetFields();
            this.addInfo = {
                dickLabel: "",
                dickValue: "",
                dickSort: "",
                dickDefinition: "",
                listClass:""
            };
            this.dialogVisible = false;
        },
    },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");
</style>